<template>
  <div class="MedicineList">
    <van-nav-bar title="药品列表" left-text="返回" left-arrow @click-left="router.back()" @click-right="openAddMedicine">
      <template #right><van-icon name="plus" size="18" /></template>
    </van-nav-bar>
    <van-pull-refresh v-model="listRefreshing" @refresh="onRefresh" height="100%">
      <van-list v-model:loading="listLoading" finished-text="没有更多了" :finished="true" >
        <div class="notice-item" v-for="item in medicineList" :key="item.id">
          <van-cell-group inset>
            <van-cell>
              <h1 style="color: #000; margin: 0; font-size: 20px;text-align: left;">{{ item.name }}</h1>
              <div>上次: {{ item.lastBuyTime }}</div>
              <van-grid :column-num="3">
                <van-grid-item><span>剩余数量</span><h2>{{ item.remainCount }}</h2></van-grid-item>
                <van-grid-item><span>剩余天数</span><h2>{{ item.remainDays }}</h2></van-grid-item>
                <van-grid-item><span>过期时间</span><h2>{{ item.expireTime }}</h2></van-grid-item>
              </van-grid>
              <a @click="openMedicineDetail(item.id)">详情...</a>
            </van-cell>
          </van-cell-group>
        </div>
      </van-list> 
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()


const listRefreshing = ref(false)
const listLoading = ref(false)

const medicineList = [
  {
    id: 1,
    name: '莲花清瘟胶囊',
    lastBuyTime: '2022-01-01',
    remainCount: 10,
    remainDays: 5,
    expireTime: 7,
  },
  {
    id: 1,
    name: '孟鲁司特',
    lastBuyTime: '2022-01-01',
    remainCount: 10,
    remainDays: 5,
    expireTime: 7,
  },
]
const onRefresh = () => {
  console.log('onRefresh')
}



const openAddMedicine = () => {
  router.push('/medicine/add')
}

const openMedicineDetail = (id: number) => {
  router.push(`/medicine/${id}`)
}

</script>

<style scoped>
.notice-item .van-cell {
  border: #eee 1px solid;
}
.notice-item span {
  font-size: 14px;
  color: #333;
}
.notice-item h2 {
  font-size: 20px;
  margin: 0;
  color: #000;
  text-align: center;
}
</style>